<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style type="text/css">
			*{
				box-sizing: border-box;
			}
			html ,body{
				width: 100%;
				height: 100%;
				padding: 0rem;
				margin: 0rem;
			}
			.container{
				height: 100%;
				background-image: url(img/bg.jpg);
				background-repeat: no-repeat;
				background-size: 100% 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.login_form{
				width: 80%;
			}
			.login_form input{
				width: 60%;
				margin-bottom: 0.3125rem;
				border: 0rem;
				border-bottom: solid 0.0625rem black;
				background-color: transparent;
				outline: none;
			}
			.login_form input:focus{
				border-bottom: solid 0.0625rem red;
			}
			.login_form form{
				text-align: center;
			}
			.btn{
				background-color: transparent;
				outline: none;
				border: 0rem;
				width: 7.5rem;
				height: 2.5rem;
			}
			.btn_login{
				background-image: url(img/btn_login_p.png);
				background-size: 100% 100%;
			}
			.btn_login:hover{
				background-image: url(img/btn_login_n.png);
			}
			.btn_logout{
				background-image: url(img/btn_logout_p.png);
				background-size: 100% 100%;
				btn 
			}
			.btn_logout:hover{
				background-image: url(img/btn_logout_n.png);
			}
			
			.login_form input::-webkit-input-placeholder {
				color: white;
			}
			
			.login_form input:-moz-placeholder {
				color: white;
			}
			
			.login_form input:-ms-input-placeholder {
				color: white;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="login_form">
				<form >
					<div>
						<input type="text" name="account" placeholder="账号"/>
					</div>
					<div>
						<input type="password" name="password" placeholder="密码"/>
					</div>
					<div>
						<button type="button" class="btn btn_login"></button>
						<button type="button" class="btn btn_logout"></button>
					</div>
				</form>
			</div>
		</div>
		<script src="../../js/jquery-3.5.1.js"></script>
		<script type="text/javascript">
			$(function(){
				$(".btn_login").click(function(){
					//获取输入框的内容
					let account=$("input[name='account']").val();
					let password=$("input[name='password']").val();
					console.log(typeof password);
					password=parseInt(password);
					if(account.trim().length===0){
						alert("请输入账号");
						return;
					}
					if (account.trim()==="chen"&&password===123) {
						alert("欢迎登录");
						console.log("nihao");
						location.href="index.html";
					}
					
				})
			})
		</script>
	</body>
</html>
